React = require('react')
Card = require('antd-mobile/lib/card')
Flex = require('antd-mobile/lib/flex')
Icon = require('antd-mobile/lib/icon')
Toast = require('antd-mobile/lib/toast')
Tabs = require('antd-mobile/lib/tabs')
TopNotice = require('antd-mobile/lib/notice-bar')
TabPane = Tabs.TabPane
# Popover = require('antd-mobile/lib/popover')
# {Tabs} = require('antd-mobile/dist/antd-mobile.js')
RefreshControl = require('antd-mobile/lib/refresh-control')
Badge = require('antd-mobile/lib/badge')
{View,ActivityIndicator,Image,Text,ScrollView,TouchableHighlight,StyleSheet,Navigator,ListView,TouchableOpacity} = require('react-native')
Dimensions = require('Dimensions')
{ width, height } = Dimensions.get('window')
{View} = require('react-native')
{fetchPilotGetList,fetchPilotRefreshList,fetchCarGetList,fetchCarRefreshList} = require('../actions/page_gcsj.js')
{connect} = require('react-redux')
_ = require('underscore')
moment = require('moment')

backImg = require('../img/back.png')
searchIcon = require('../img/search_white.png')


Page_Gcsj = React.createClass
  getInitialState:->
    @pilotDs = new ListView.DataSource rowHasChanged:(r1,r2)->r1 isnt r2
    @carDs = new ListView.DataSource rowHasChanged:(r1,r2)->r1 isnt r2
    @tabsActiveKey='1'
    {}

  _processTime:(time)->
    t = moment(time)
    t.format('DD/HHmm')

  _renderListSeparator:(sectionID,rowID)->
    <View key={rowID}  style={{height:1,backgroundColor:'#CCCCCC'}}/>
  _getPilotTime:(name)->
    debugger
    m = _.findWhere @props.pilot.list,{VCPILOTNAME:name}
    if m
      gcsj = @_processTime(m.DTCARRESERVATIONOUT)
      gcsj =  "(#{gcsj})"
    else
      gcsj = ""
    name + gcsj
  _renderCarRow:(rowData,sectionID,rowID,highlightRow)->
    debugger
    <View key={rowData.rowID} style={{flexDirection:'column',padding:10}}>
      <View style={{flexDirection:'row'}}>
        <View style={{flex:1}}>
          <Text style={{fontWeight:'bold'}}>
            {"港车时间：#{rowData.DTCARRESERVATIONOUT}"}
          </Text>
        </View>
      </View>
      <View style={{flexDirection:'row'}}>
        <View style={{flex:1}}>
          <Text>{"1：#{@_getPilotTime(rowData.VCPILOTNAME1)}"}</Text>
        </View>
        <View style={{flex:1}}>
          <Text>{"2：#{@_getPilotTime(rowData.VCPILOTNAME2)}"}</Text>
        </View>
      </View>
      <View style={{flexDirection:'row'}}>
        <View style={{flex:1}}>
          <Text>{"3：#{@_getPilotTime(rowData.VCPILOTNAME3)}"}</Text>
        </View>
        <View style={{flex:1}}>
          <Text>{"4：#{@_getPilotTime(rowData.VCPILOTNAME4)}"}</Text>
        </View>
      </View>
      <View style={{flexDirection:'row'}}>
        <View style={{flex:1}}>
          <Text>{"5：#{@_getPilotTime(rowData.VCPILOTNAME5)}"}</Text>
        </View>
        <View style={{flex:1}}>
          <Text>{"6：#{@_getPilotTime(rowData.VCPILOTNAME6)}"}</Text>
        </View>
      </View>
      <View style={{flexDirection:'row'}}>
        <View style={{flex:1}}>
          <Text>{"7：#{@_getPilotTime(rowData.VCPILOTNAME7)}"}</Text>
        </View>
        <View style={{flex:1}}>
          <Text>{"8：#{@_getPilotTime(rowData.VCPILOTNAME8)}"}</Text>
        </View>
      </View>
    </View>
  _renderPilotRow:(rowData,sectionID,rowID,highlightRow)->
      <View key={rowID} style={{flexDirection:'column',padding:10}}>
        <View style={{flexDirection:'row'}}>
          <View style={{flex:1}}>
            <Text style={{fontWeight:'bold'}}>{rowData.VCVESCNAME}</Text>
          </View>
          <View style={{flex:1}}>
            <Text style={{fontWeight:'bold'}}>{"引航员:#{rowData.VCPILOTNAME}"}</Text>
          </View>
        </View>
        <View style={{flexDirection:'row'}}>
          <View style={{flex:1}}>
            <Text>{"引航状态:#{rowData.CHPILOTAGESTATENAME}"}</Text>
          </View>
          <View style={{flex:1}}>
            <Text>{"离泊泊位:#{rowData.VCCHBERTHSIGN}"}</Text>
          </View>
        </View>
        <View style={{flexDirection:'row'}}>
          <View style={{flex:1}}>
            <Text>{"港车时间:#{@_processTime(rowData.DTCARRESERVATIONOUT)}"}</Text>
          </View>
          <View style={{flex:1}}>
            <Text>{"离泊时间:#{@_processTime(rowData.SDLEAVETIMECONFIRMED)}"}</Text>
          </View>
        </View>
      </View>

  _renderCarListFooter:->
    if @props.car.completed
      <View style={{flexDirection:'row',justifyContent:'center',paddingTop:20,paddingBottom:30}}>
        <Text>到底了</Text>
      </View>
    else unless @props.car.refreshing
      <View style={{flexDirection:'row',justifyContent:'center',paddingTop:20,paddingBottom:30}}>
        <ActivityIndicator size='small'></ActivityIndicator>
        <Text style={{marginLeft:5}}>正在加载</Text>
      </View>
    else
      <View/>

  _renderPilotListFooter:->
    if @props.pilot.completed
      <View style={{flexDirection:'row',justifyContent:'center',paddingTop:20,paddingBottom:30}}>
        <Text>到底了</Text>
      </View>
    else unless @props.pilot.refreshing
      <View style={{flexDirection:'row',justifyContent:'center',paddingTop:20,paddingBottom:30}}>
        <ActivityIndicator size='small'></ActivityIndicator>
        <Text style={{marginLeft:5}}>正在加载</Text>
      </View>
    else
      <View/>

  onPilotEndReached:->
    debugger
    return if @props.pilot.isLoading or @props.pilot.refreshing or @props.pilot.completed
    @props.fetchPilotGet(@props.pilot.pageIndex+1)
  onCarEndReached:->
    debugger
    return if @props.car.isLoading or @props.car.refreshing or @props.car.completed
    @props.fetchCarGet(@props.car.pageIndex+1)


  pilotRefreshList:->
    @props.fetchPilotRefresh()
  carRefreshList:->
    @props.fetchCarRefresh()
  _renderHeader:->
      <View style={{flexDirection:'row',flex:0,height:60,alignItems:'center', justifyContent:'center',backgroundColor:'#0066FF'}}>
        <View style={{flex:1,padding:10}}>
          <TouchableOpacity onPress={=>@props.navigator.pop()}>
            <Image source={backImg}  style={{height:30,width:30,resizeMode:'contain'}}/>
          </TouchableOpacity>
        </View>
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
          <Text style={{fontSize:20,color:'#ffffff'}}>港车时间</Text>
        </View>
        <View style={{flex:1,alignItems:'flex-end',padding:10}}>
          <TouchableOpacity onPress={@_showActionSheet}>
          </TouchableOpacity>
        </View>
      </View>

  componentDidMount:->
    if @props.connected
      @props.fetchPilotRefresh()
      @props.fetchCarRefresh()
  tabChangeHandle:(key)->
    @tabsActiveKey=key
  render:->
    @pilotDataSource = @pilotDs.cloneWithRows(@props.pilot.list)
    @gcsjDataSource = @carDs.cloneWithRows(@props.car.list)
    <View style={{flexDirection:'column',height:height,width:width,backgroundColor:'#ffffff'}}>
      {@_renderHeader()}
      {
        if @props.connected is false and @props.pilot.list.length>0
          <TopNotice mode="closable" style={{margin:10}}>
            无网络连接，您现在看到的是离线缓存数据
          </TopNotice>
      }
      <Tabs defaultActiveKey="1" activeKey={@tabsActiveKey} onChange={@tabChangeHandle}>
         <TabPane tab="引航员" key="1">
              <View style={{alignItems: 'flex-start', justifyContent: 'center',flex:1,width:width,height:height-60,paddingBottom:60}}>
                <ListView dataSource={@pilotDataSource} style={{flex:1,width:width}}
                      enableEmptySections={true}
                      renderRow={@_renderPilotRow}
                      renderSeparator={this._renderListSeparator}
                      renderFooter={@_renderPilotListFooter}
                      initiaListSize=10
                      pageSize={20}
                      scrollEventThrottle={20}
                      onEndReached={@onPilotEndReached}
                      onEndReachedThreshold={20}
                      stickyHeader
                      stickyProps={{
                        stickyStyle: { zIndex: 999, top: 43 },
                        topOffset: -43,
                      }}
                      refreshControl={
                        <RefreshControl refreshing={@props.pilot.refreshing} onRefresh={@pilotRefreshList}
                            distanceToRefresh={60}
                            resistance={2.5}
                            hammerOptions={{
                              touchAction:'auto'
                              recognizers:
                                pan:
                                  threshold:10
                              }}/>
                      }>
                </ListView>
              </View>
          </TabPane>
          <TabPane tab="港车时间" key="2">
            <View style={{alignItems: 'flex-start', justifyContent: 'center',flex:1,width:width,height:height-60,paddingBottom:60}}>
              <ListView dataSource={@gcsjDataSource} style={{flex:1,width:width}}
                    enableEmptySections={true}
                    renderRow={@_renderCarRow}
                    renderSeparator={this._renderListSeparator}
                    renderFooter={@_renderCarListFooter}
                    initiaListSize=10
                    pageSize={20}
                    scrollEventThrottle={20}
                    onEndReached={@onCarEndReached}
                    onEndReachedThreshold={20}
                    stickyHeader
                    stickyProps={{
                      stickyStyle: { zIndex: 999, top: 43 },
                      topOffset: -43,
                    }}
                    refreshControl={
                      <RefreshControl refreshing={@props.car.refreshing} onRefresh={@carRefreshList}
                          distanceToRefresh={60}
                          resistance={2.5}
                          hammerOptions={{
                            touchAction:'auto'
                            recognizers:
                              pan:
                                threshold:10
                            }}/>
                    }>
              </ListView>
            </View>
          </TabPane>
      </Tabs>
    </View>

styles = StyleSheet.create
  row:
    flexDirection:'column'
    justifyContent:'center'
    padding:10
    backgroundColor:'#F6F6F6'
  text:
    flex:1

mapStateToProps = (state)->
  pilot:state.page_gcsj.pilot
  car:state.page_gcsj.car
  connected:state.appState.connected
# fetchPilotGetList,fetchPilotRefreshList,fetchCarGetList,fetchCarRefreshList
mapDispatchToProps = (dispatch,wonProps)->
  fetchPilotGet:(pageNum)->
    dispatch fetchPilotGetList(pageNum)
  fetchPilotRefresh:->
    dispatch fetchPilotRefreshList()
  fetchCarGet:(pageNum)->
    dispatch fetchCarGetList(pageNum)
  fetchCarRefresh:->
    dispatch fetchCarRefreshList()

module.exports = connect(mapStateToProps,mapDispatchToProps)(Page_Gcsj)
